<template>
  <div class="shopFront" ref="clientHeight">
        <div class="mask" v-if="mask" @click="clickMask"></div>
        <!-- 头部 -->
        <Tabs :value="currentTab" ref="tabs" v-model="currentTab" @on-click="changeTab">
            <TabPane label="字母" name="name1">            
            </TabPane>            
            <TabPane label="类别" name="name2" class="alert2Wrap">                                         
            </TabPane>
            <TabPane label="楼层" name="name3">                
            </TabPane>
        </Tabs>
        <!-- 字母 -->
        <div class="alert1" ref="box1h" v-if="box1h">
          <ul v-for="(value,index) in alphas" :key="index">
            <li @click="alphaDetail(value,index)" :class="[activeIndex1 == index?'isAlive':'']">
              {{value}}
            </li>
          </ul>
        </div>
        <!-- 类别 -->      
        <div class="alert2"  ref="box2h" v-if="box2h">
          <div v-for="(value,index) in classes" :key="index">
            <ul v-for="(subValue,index) in value.business_sub" :key="index">
              <li @click="getSubDetail(subValue.business2_id)" :class="[activeIndex2 == subValue.business2_id?'isAlive':'']">
                  {{subValue.business2_name}}                
              </li>
            </ul>
          </div>
        </div>
        <!-- 楼层 -->
        <div class="alert3"  ref="box3h" v-if="box3h">
          <ul v-for="(value,index) in floors" :key="index">
            <li @click="floorDetail(value,index)" :class="[activeIndex3 == index?'isAlive':'']">
              {{value}}                    
            </li>
          </ul>
        </div>
      <floor-view v-if="fView"></floor-view>
        <!-- 正文部分 -->
         <Scroll :height="fullHeight" loading-text="hi" v-if="scroll">
              <div class="food-class" v-for="(item, index) in shops" :key="index">
                  <div :style="'background-image:' + 'url(' + item.img_url + ')'" class="child-img ">
                      <div class="txt-control mark" @click="toPerShop(item.store_code)">
                      <div class="theme-txt">
                          <p class="theme-title">{{item.store_name}}</p>
                          <p class="theme-place">{{item.floor}}铺</p>
                      </div>
                      </div>
                  </div>
              </div>            
        </Scroll>
        <!-- 加载圈 -->
      <loading v-if="showLoad"></loading>
  </div>
</template>

<script>

import Loading from '../components/loading'
import FloorView from '../components/floorView'
export default {
  name: "shopFront",
  components: {FloorView, Loading},
  props: {
    list: {}
  },
  data() {
    return {
      indexPrev:0,
      activeIndex1:-1,
      activeIndex2:-1,
      activeIndex3:-1,
      showLoad:false,
      mask:false,
      scroll:true,
      fullHeight: 0,
      fView:false,
      currentTab:"",
      clientHeight:'',      
      alphas: [
        "#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
      ],
      box1h:false,
      box2h:false,
      box3h:false,
      shops: [],
      classes:[],
      floors:[]            
    };
  },
  beforeMount () {
    var h = document.documentElement.clientHeight || document.body.clientHeight
    // 减去页面上固定高度height
    this.fullHeight = h - 50
  },
  created() {
    this.getAlpha(); 
    this.getClasses();  
    this.getFloor();
  },   
  watch: {
    
  },
  methods: {
    toPerShop(code) {
      this.$router.push({
        path: '/storeInfo',
        query: {
          store_code: code
        }
      })
    },
    clickMask(){
      this.mask=false;
      this.box1h=false;   
      this.box2h=false;                     
      this.box3h=false;     
      // this.scroll=false;
    },
    changeTab:function(name){
      this.mask=true;
      this.currentTab=name;          
      if(this.currentTab=='name1'){      
        this.fView=false;  
        this.scroll=true;
        this.box2h=false; 
        this.box3h=false; 
        this.box1h=!this.box1h;   
        if(this.box1h==false){
          this.mask=false;
        }            
      }
      else if(this.currentTab=="name2"){
        this.fView=false;  
        this.scroll=true;
        this.box1h=false;   
        this.box3h=false;                  
        this.box2h=!this.box2h;   
        if(this.box2h==false){
          this.mask=false;
        }                      
      }else
      if(this.currentTab=="name3"){       
        this.fView=false;  
        this.scroll=true;
        this.box1h=false;   
        this.box2h=false;                  
        this.box3h=!this.box3h;   
        if(this.box3h==false){
          this.mask=false;
        } 
      }else{
        return false;
      }
    },
    getAlpha:function(){
      this.showLoad=true;  
      this.$axios({
        method:"get",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList"
      })
      .then(res=>{
        this.shops=res.data.result;   
        this.showLoad=false;     
      });
    },
    getClasses:function(){
      this.$axios({
        method:"post",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/floorList"
      })
      .then(res=>{
        this.classes=res.data.result.type;        
      })
    }, 
    getFloor(){
      this.$axios({
        method:"post",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/floorList",
      })
      .then(res=>{        
        this.floors=res.data.result.floor;
      });
    },    
    alphaDetail:function(value,index){ 
      //选中的添加border      
      this.activeIndex1=index;         
      this.activeIndex2=-1;  
      this.activeIndex3=-1;  
      // 请求数据
      this.showLoad=true;             
      this.$axios({
        method:"get",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList",
        params:{
          letter:value
        }
      })
      .then(res=>{        
        this.shops=res.data.result;   
        this.showLoad=false;     
      });
      this.box1h=false;   
      this.mask=false;   
    },
    getSubDetail(id){   
      this.activeIndex2=id;  
      this.activeIndex1=-1;               
      this.activeIndex3=-1;     
      this.showLoad=true;   
     this.$axios({
        method:"get",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList",
        params:{
          business_sub:id
        }       
      })
      .then(res=>{        
        this.shops=res.data.result;   
        this.showLoad=false;      
      });
      this.box2h=false;
      this.mask=false;
    },
    floorDetail(floor,index){    
      this.activeIndex3=index; 
      this.activeIndex1=-1;         
      this.activeIndex2=-1;              
      this.showLoad=true;       
      this.$axios({
        method:"get",
        url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/shopList",
        params:{
          floor:floor
        }       
      })
      .then(res=>{        
        this.shops=res.data.result;  
        this.showLoad=false;           
      });
      this.box3h=false;
      this.mask=false;
    }        
  }
};
</script>

<style lang="scss">
    .alert1 ul .isAlive{
        border:1px solid #b2835b;
        line-height: 1.9rem;
    }
//v-for时，单个元素的class控制
.alert1 ul .isAlive,
.alert2 ul .isAlive,
.alert3 ul .isAlive{
  border:1px solid #b2835b;
  line-height: 1.9rem;
}
.alert1 ul li, .alert2 ul li, .alert3 ul li{
  background-color: #fff;
}
// 遮罩
.mask{
  position: fixed;
    top: 52px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.8);
    z-index: 99;
}
// 正文部分
 .food-class{
        width: 47%;
        height: 120px;
        float: left;
        margin: 1.5%;
    }
    .child-img{
        width: 100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        border-radius: 5px;
    }
    .txt-control{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mark{
        width: 100%;
        height: 120px;
        float: left;
        margin: 0;
        position: relative;
        z-index: 1;
        background: rgba(66,66,66,.2);
        border-radius: 3px;
    }
    .theme-txt{
        z-index: 2;
        width: 80%;
        height: 70%;
        color: #fff;
        border: 3px solid #fff;
        padding: 2% 4%;
        position: relative;
        font-weight: bold;
    }
    .theme-title{
        width: 70%;
        font-size: 14px;
        /*font-weight: bold;*/
        text-align: left;
    }
    .theme-place{
        position: absolute;
        bottom: 0;
        right: 4%;
    }
    .ivu-scroll-loader{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
// 分割线
 .ivu-tabs-bar  {
        margin-bottom: 0px;
    }
    .alert2 ul li{
      float: left;
      width:33%;
    }
.alert2 ul .subClass{
  width:90%;
  margin-left: 5%;
  background-color: #fff;
}
.ivu-tabs-nav-container{
  z-index: 9999;
  background-color: #fff;
}
.shopFront .ivu-tabs{
    height: 43px;
}
.ivu-tabs-nav .ivu-tabs-tab{  
  height: 100%;
  color:#b4b4b4;
}
.ivu-tabs-nav .ivu-tabs-tab:hover{  
  height: 500%;
  position: relative;
}
.alert1,.alert2,.alert3{
  width: 100%;
  height: auto;
  position: absolute;
  background-color: #f4f6fb;
  left: 0rem;
  top:2.9rem;
  padding-top: 1rem;
  color: black;
  z-index: 9999;  
}
.alert2Wrap{
  position: relative;
} 
.alert1 ul{
  // padding-left: 1%;
}
.alert1 ul li{
  float: left;
  width: 25%;  
  //给边框腾出空间
  // width:24%;
}
// .alert2 ul li{
//   float: left;
//   width: 50%;
// }
.alert3 ul li{
  width: 50%;
  float: left;
}
.alert2 ul li a
{  
  display: inline-block;
  text-align: center;  
  color: #b2835b;
  width: 90%;  
  background-color: #fff;
}
.alert1 ul li span,
.alert3 ul li span{
  color: #b2835b;
  padding-left: 40%;
  padding-right: 40%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
  background-color: #fff;
}
#app{
  position: static;
}
body{
    background-color: #f4f6fb;
}
.label1 {
  background: #000;
}
.cb {
  clear: both;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.shopFront .boxUp ul li .left{
  text-align: left;
}
.boxup{
  overflow-y: scroll;
}
.alert1 ul li,
.alert2 ul li,
.alert3 ul li{
  color: #b2835b!important;
}
.ivu-tabs-tabpane{    
    height: 100%;    
}
.ivu-tabs-nav .ivu-tabs-tab{
  font-size: 18px!important;
}
.ivu-page-simple .ivu-page-simple-pager {
  display: none;
}
.ivu-tabs-nav .ivu-tabs-tab:hover{
  color: #b2835b!important;
}
.ivu-tabs-nav .ivu-tabs-tab-active{
  color: #b2835b!important;
  font-size: 18px!important;
}
.ivu-tabs-tab:hover{
    color: #b2835b!important;
  }
.ivu-tabs-ink-bar {
  background-color: #b2835b!important;
  transform: translate3d(33.33%, 0 , 0);
}
@media screen and (max-width: 359px) {
  .alert1,.alert2,.alert3{
    padding-bottom: 0.5rem;
  }
  .alert1 ul li{
    width: 23%;
    margin: 0.3rem 0;
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;
    background-color: #fff;
  }
  .alert2 ul li,
  .alert3 ul li{
    width: 48%;
    margin:0.3rem 0;   
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;     
    background-color: #fff; 
  }
  // .alert3 ul li span{
  //   display: inline-block;
  //   width: 90%;
  //   background-color: #fff;
  // }
    .ivu-tabs-bar  {
        margin-bottom: 0px;
    }
    .ivu-tabs-tab{
        width:38%;
    }
  .shopFront {    
    height: 100%;
    .boxUp {    
        padding-bottom: 0.5rem;
      ul {           
        li {
            background-color: #fff;
          padding-top: 0.5rem;
          .left {
            position: relative;
            margin-left: 0.6rem;
            img {
              width: 4.5rem;
            }
            .text {
              display: inline-block;
              width: 100%;
              position: absolute;
              top: 1rem;
              left: 6rem;
              text-align: left;
            }
          }
          .right {
            position: relative;
            .text {
              position: absolute;
              right: 1rem;
              top: 1rem;
            }
          }
        }
      }
    }
    .boxDown {
    //   position: fixed;
    //   bottom: 0rem;
    //   left: 40%;
    }
    .line {
      width: 100%;
      height: 0.1rem;
      background-color: #ededed;
      margin-top: 0.5rem;
    }
  }
}
@media screen and (min-width: 360px) and (max-width: 410px) {
  .alert1,.alert2,.alert3{
    padding-bottom: 0.5rem;
  }
  .alert1 ul li{
    width: 23%;
    margin: 0.3rem 0;
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;
    background-color: #fff;
  }
  .alert2 ul li,
  .alert3 ul li{
    width: 48%;
    margin:0.3rem 0;   
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;     
    background-color: #fff; 
  }
  // .alert3 ul li span{
  //   display: inline-block;
  //   width: 90%;
  //   background-color: #fff;
  // }
    .ivu-tabs-tab{
        width:45%;
    }
    .ivu-tabs-nav .ivu-tabs-tab{
        font-size: 1rem;
    }
  .shopFront {
    .boxUp {
        padding-bottom: 0.5rem;
      ul li {
          background-color: #fff;
        padding-top: 0.5rem;
        position: relative;
        .left {
          position: relative;
          margin-left: 0.8rem;
          img {
            width: 5.5rem;
          }
          .text {
            display: inline-block;
            width: 100%;
            position: absolute;
            top: 1rem;
            left: 7rem;
            text-align: left;
          }
        }
        .right {
          position: absolute;
          right: 1rem;
          top: 2rem;
        }
      }
    }
    .boxDown {
    //   position: fixed;
    //   bottom: 1rem;
    //   left: 40%;
    }
    .line {
      width: 100%;
      height: 0.1rem;
      background-color: #ededed;
      margin-top: 0.5rem;
    }
  }
}
@media screen and (min-width: 411px) {
  .alert1,.alert2,.alert3{
    padding-bottom: 1rem;
  }
  .alert1 ul li{
    width: 23%;
    margin:0.3rem 0;   
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;     
    background-color: #fff;
  }
  .alert2 ul li,
  .alert3 ul li{
    width: 48%;
    margin:0.3rem 0;   
    margin-left: 1%;
    margin-right: 1%;
    line-height: 2rem;     
    background-color: #fff;
  } 
  .ivu-tabs-nav .ivu-tabs-tab{
    width: 49%;
  }
  .shopFront {
    font-size: 1rem;
    height: 100%;
    background-color: #fafafb;
    .boxUp {
        padding-bottom: 0.5rem;      
      ul li {
          background-color: #fff;
        padding-top: 0.5rem;
        position: relative;
        .left {
          display: inline-block;
          width: 100%;
          position: relative;
          margin-left: 1rem;
          img {
            width: 6.8rem;
          }
          .text {
            position: absolute;
            top: 1.4rem;
            left: 8.5rem;
          }
        }
        .right {
          position: absolute;
          right: 1rem;
          top: 2rem;
        }
      }
    }
    .boxDown {
      padding-top: 1rem;
      padding-bottom: 1rem;
      .page {
        .ivu-page-prev,
        .ivu-page-next {
          min-width: 7rem;
        }
        .ivu-page-simple-pager {
          display: none;
        }
      }
    }

    .line {
      width: 100%;
      height: 0.1rem;
      background-color: #ededed;
      margin-top: 0.5rem;
    }
  }
}
</style>
